<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="css/style.css" type="text/css"/>
        <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
        <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css"/>        

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui-1.8.16/jquery-ui.js"></script>
        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script type='text/javascript'>
            //load the table package
            google.load('visualization', '1', {packages: ['corechart']});
            $(document).ready(function() {


                var datatbl = new google.visualization.DataTable();

                //get the data from the file and load it into the google datatable
                $.getJSON('/Last7DayAverages.php', function(data) {

                    //create the rows and columns in the datatable
                    var noElements = data.length;
                    datatbl.addColumn('string', 'Date');
                    datatbl.addColumn('number', 'Temp');
                    datatbl.addColumn('number', 'Feels like');
                   // datatbl.addColumn('number', 'Humidity(%)');
                   // datatbl.addColumn('number', 'Wind Direction');
                   // datatbl.addColumn('number', 'Wind Avg Speed (mph)');
                   // datatbl.addColumn('number', 'Wind Gust (mph)');
                   // datatbl.addColumn('number', 'Rain (mm)');
                   // datatbl.addColumn('number', 'Abs Pressure (hPa)');
                    datatbl.addRows(noElements);

                    //Put the data into the datatable
                    $.each(data, function(i, v) {
                        // set the values for both the name and the population
                        datatbl.setValue(i, 0, v.Date);
                        datatbl.setValue(i, 1, v.Temp);
                        datatbl.setValue(i, 2, v.FeelsLike);
                      //  datatbl.setValue(i, 3, v.humidity);
                      //  datatbl.setValue(i, 4, v.winddir);
                      //  datatbl.setValue(i, 5, v.windspeedmph);
                      //  datatbl.setValue(i, 6, v.windgustmph);
                      //  datatbl.setValue(i, 7, v.dailyrain);
                      //  datatbl.setValue(i, 8, v.barom);
                    });

                    //declare the chart (which is a table) and draw it 
                    var viewTable = new google.visualization.DataView(datatbl);
                    //viewTable.setColumns([0, 1, 2]);
                    var table = new google.visualization.LineChart(document.getElementById('temp_div'));
                    table.draw(viewTable);
                    /*
                     //create an instance of the google table chart
                     var table = new google.visualization.Table(document.getElementById('table_div'));
                     
                     //draw the table chart
                     table.draw(datatable);
                     */
                });
            });
        </script>
        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>

        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <title>Project Easel Demo - HTML5, jQuery, REST</title>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">Project name</a>

                    <div class="btn-group pull-right">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="icon-user"></i> Username
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Profile</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Sign Out</a></li>
                        </ul>
                    </div>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active"><a href="index.php">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Tab</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div id='table_div'></div>
            </div>
            <div class="row-fluid">
                <div class="row-fluid">
                </div>
            </div>


            <script type="text/javascript" src="js/draganddrop.js"></script>
            <script src="js/bootstrap-dropdown.js"></script>
            <script src="js/bootstrap-collapse.js"></script>
    </body>
</html>
